<template>
  <el-dialog title="检查问题列表" :visible.sync="show" class="eval-problem-dialog" fullscreen :close-on-click-modal="false" :show-close="!btnLoading" @closed="closed">
    <div class="container" :class="{ hideLeftbar }">
      <div class="leftbar" :class="{ disabled: disableAction }">
        <div style="width: 260px">
          <ProblemInput ref="ProblemInput" />
          <el-button size="mini" type="primary" :loading="btnLoading" @click="btnSubmit">保存问题</el-button>
          <el-button size="mini" type="primary" @click="resetFields">重置</el-button>
        </div>
      </div>
      <div class="rightbar">
        <el-button class="toggle-btn" size="mini" icon="el-icon-arrow-left" circle @click="hideLeftbar = !hideLeftbar" style="padding: 4px" />
        <ProblemList ref="ProblemList" />
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { debounce } from '@/utils'
import { addProblem } from '@/api/checkScore/cqEval'
import ProblemInput from './EvalProblemInput'
import ProblemList from './EvalProblemList'
export default {
  components: { ProblemInput, ProblemList },
  data() {
    return {
      show: false,
      hideLeftbar: false,
      btnLoading: false,
      evalScore: {
        prjchkId: '',
        projectId: '',
        chkitemType: ''
      }
    }
  },
  computed: {
    disableAction() {
      return this.btnLoading
    }
  },
  created() {
    this.btnSubmit = debounce(this.onSubmit, 1e3, true)
  },
  methods: {
    closed() {
      this.hideLeftbar = false
      this.$refs.ProblemInput.reset()
      this.$refs.ProblemList.reset()
    },
    open({ data }) {
      data.chkitemType = data.chkitemCode
      console.log(data.versionCode)
      const { prjchkId, projectId, chkitemType,versionCode } = data
      if (!prjchkId || !projectId || !chkitemType) return this.msgError('无效参数')

      this.show = true
      this.evalScore = data
      const opt = { prjchkId, projectId, chkitemType,versionCode }
      this.$nextTick(() => {
        this.$refs.ProblemInput.init(opt)
        this.$refs.ProblemList.init(opt)
      })
    },
    resetFields() {
      this.$refs.ProblemInput.resetFields()
    },
    async onSubmit() {
      const form = await this.$refs.ProblemInput.submit()
      if (form === false) return

      const opt = { ...form }
      const info = this.evalScore
      opt.prjchkId = info.prjchkId
      opt.projectId = info.projectId
      opt.chkitemType = info.chkitemType
      opt.versionCode = info.versionCode
      this.btnLoading = true
      const res = await addProblem(opt).catch(() => false)
      this.btnLoading = false
      if (res === false) return

      this.msgSuccess('新增成功')
      this.resetFields()
      this.$refs.ProblemList.getList()
      this.$emit('ok')
    }
  }
}
</script>
<style lang="scss" scoped>
.eval-problem-dialog {
  /deep/ .el-dialog__body {
    padding: 10px 0 0;
  }
}
.container {
  display: flex;
  min-width: 1000px;
  overflow-x: auto;
}
.leftbar {
  width: 300px;
  height: calc(100vh - 80px);
  padding: 0 15px;
  transition-duration: 0.24s;
  opacity: 1;
  overflow: hidden auto;
}
.rightbar {
  position: relative;
  flex: 1;
  height: calc(100vh - 80px);
  padding-left: 20px;
  border-left: 1px solid #eaeefb;
}
.toggle-btn {
  position: absolute;
  left: -12px;
  top: 30%;
}
.hideLeftbar {
  .leftbar {
    width: 0;
    padding-right: 0;
    opacity: 0;
  }
  .toggle-btn {
    transform: rotate(180deg);
  }
}
</style>
